<template>
<div>
  <van-nav-bar
      title="添加地址"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
  />
  <!-- 输入任意文本 -->
  <van-form @submit="onSubmit" onSubmit>
    <van-field v-model="text" name="name" label="姓名"  placeholder="姓名" />
    <van-field v-model="tel"  name="tel" type="tel" label="手机号" :rules="[{ pattern, message: '请输入正确内容' }]" placeholder="手机号" />
    <van-field v-model="vlaue" name="address" label="地区" readonly  @click="flag=true" is-link  placeholder="地区" />
    <van-field v-model="address" name="ress"  label="详细地址" placeholder="详细地址" />
    <van-field v-model="PostOffice" name="PostOffice" label="邮政编码" maxlength="5"  placeholder="邮政编码" />
    <van-cell-group style="margin:10px 0">
      <van-switch-cell v-model="checked" title="默认" name="isDefault" />
    </van-cell-group>
    <van-popup v-model="flag" position="bottom" :style="{ height: '50%' }">
      <van-area
          title="收货地址"
          @confirm="confirm"
          @cancel="cancel"
          value="110100"
          :area-list="areaList"
          :columns-placeholder="['请选择', '请选择', '请选择']"
      />
   -->
    </van-popup>
    <van-button native-type="submit"  color="linear-gradient(to right, #ff6034, #ee0a24)" round  size="large">保存</van-button>
  </van-form>
</div>
</template>

<script>
import {Toast} from "vant";
import { areaList } from '@vant/area-data';
 export default {
  name: "adress",
  data(){
    return{
      flag:false,
      showShare:false,
      areaList,
      pattern: /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/,
      tel:'',//手机号
      text:'',//姓名
      vlaue:'',//地址
      address:'',//详情地址
      checked:false,//是否默认
      PostOffice:'',//邮政编码
    }
  },
   methods: {
    //"110000""110100""110101"
    onSubmit(obj){
      this.$set(obj,'address',obj.address+"/"+obj.ress)
      this.$set(obj,'isDefault',this.checked)
      Toast('保存成功')
      this.$store.commit('address/seTaddList',obj)
    },
    // 获取地区code码,名字
    confirm(arr){
      this.vlaue='';
      this.vlaue=arr[0].name+"/"+arr[1].name+"/"+arr[2].name;
      this.flag=false
    },
    //关闭选项卡
    cancel(){
      this.flag=false
    },
     //返回
     onClickLeft() {
      this.$router.back()
  },
  },
}
</script>

<style scoped>

</style>